<template>
  <div class="main" style="width: 100%;">
    <div class="main-search-body">

      <div class="float-right-nav">
        <a-anchor>
          <a-anchor-link href="#info">简历信息</a-anchor-link>
          <a-anchor-link href="#my_info">个人信息</a-anchor-link>
          <a-anchor-link href="#edu">教育背景</a-anchor-link>
          <a-anchor-link href="#expect">求职期望</a-anchor-link>
          <a-anchor-link href="#speak">自我描述</a-anchor-link>
        </a-anchor>
      </div>
      <div class="inside" style="margin:90px;margin-top: 40px;padding-bottom: 80px;">
        <p style="font-size: 32px;display:inline-block;margin-right: 20px;" id="info">查看简历</p>
        <a-button type="outline" v-for="name in reName" @click="changeNow(name)"
        style="margin-right: 10px;">
          {{name}}
        </a-button>
        <p class="p-title"><div class="blue"></div>简历信息</p>

        <div class="container">
          <div class="item item1">
            <p class="little-title">附件简历:</p>
            <a :href="BASE_URL + saveSeekerForm[now].resumeFile" target="_blank" style="display: inline-block; width: 200px;
            position: relative;">
<!--              <img :src="BASE_URL + saveSeekerForm.resumeFile" alt="文件预览" v-if="isImageType(saveSeekerForm.resumeFile)" style="width: 100%; height: auto;">-->
<!--              <span v-else>查看文件</span>-->
              点击查看附件详情
            </a>
          </div>
          <div class="item item2">
            <p class="little-title">简历名称:</p>
            {{saveSeekerForm[now].resumeName}}
          </div>
        </div>

        <p class="p-title" id="my_info"><div class="blue"></div>个人信息</p>
        <div class="container">
          <div class="item item1">
            <p class="little-title">姓名</p>
            {{saveSeekerForm[now].realName}}
            <br>
            <p class="little-title">手机号</p>
            {{saveSeekerForm[now].phone}}
            <br>
            <p class="little-title">身份</p>
            {{saveSeekerForm[now].identity}}
          </div>
          <div class="item item3">
            <p class="little-title">个人优势</p>
            {{saveSeekerForm[now].personalAdvantage}}
            <br>
            <p class="little-title">出生日期</p>
            {{saveSeekerForm[now].birthday}}
            <br>
            <p class="little-title">城市</p>
            {{saveSeekerForm[now].birthdayPlace}}
          </div>
          <div class="item item2">
            <p class="little-title">性别</p>
            {{saveSeekerForm[now].gender}}
            <br>
            <p class="little-title">邮箱</p>
            {{saveSeekerForm[now].email}}
            <br>
            <p class="little-title">微信号</p>
            {{saveSeekerForm[now].wechatId}}
          </div>
        </div>

        <p class="p-title" id="edu" style="margin-top: 30px;"><div class="blue"></div>教育背景</p>
        <div class="container">
          <div class="item item1">
            <p class="little-title">学校名称</p>
            {{saveSeekerForm[now].school1}}
            <br>
            <p class="little-title">专业名称</p>
            {{saveSeekerForm[now].major}}
          </div>
          <div class="item item2">
            <p class="little-title">毕业时间</p>
            {{saveSeekerForm[now].graduateTime}}
            <br>
            <p class="little-title">学校所在地</p>
            {{saveSeekerForm[now].school2}}
          </div>
          <div class="item item3">
            <p class="little-title">学位</p>
            {{saveSeekerForm[now].degree}}
            <br>
            <p class="little-title">教育背景</p>
            {{saveSeekerForm[now].educationBackground}}
          </div>
        </div>

        <p class="p-title" id="expect" style="margin-top: 30px;"><div class="blue"></div>求职期望</p>
        <div class="container">
          <div class="item item1">
            <p class="little-title">求职状态</p>
            {{saveSeekerForm[now].lookforStatus}}
            <br>
            <p class="little-title">期望城市</p>
            {{saveSeekerForm[now].expectedCity}}
          </div>
          <div class="item item2">
            <p class="little-title">期望岗位</p>
            {{saveSeekerForm[now].expectedJob}}
            <br>
            <p class="little-title">雇佣类型</p>
            {{saveSeekerForm[now].employmentType}}
          </div>
          <div class="item item3">
            <p class="little-title">最低期望薪资</p>
            {{saveSeekerForm[now].expectedSalaryMin}}
            <br>
            <p class="little-title">最高期望薪资</p>
            {{saveSeekerForm[now].expectedSalaryMax}}
          </div>
        </div>

        <p class="p-title" id="speak" style="margin-top: 30px;"><div class="blue"></div>自我描述</p>
        {{saveSeekerForm[now].intro}}
<!--        <router-link to="'/Resume?now='+now+'&'"-->
          <el-button v-if="num!=1" @click="xiugai(now)" round style="float:right;width: 100px;color: #6c4295" size="large">修改</el-button>
          <el-button v-if="num!=1" @click="deletejl(now)" round style="float:right;width: 100px;color: #6c4295;margin-right: 20px;" size="large">删除</el-button>
      </div>

    </div>
  </div>
</template>

<script setup>
// 备注：school1表示学校名称,school2表示学校所在地,
//准备对象用来收集新增/修改简历的表单信息
import {onMounted, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";
import {useRouter} from "vue-router";

const dialogVisible = ref(true);
const router = useRouter();
const user = ref(getUser());
const now = ref(0);
let length = 1;
const num = ref();
const id = ref(0);
const uid = ref();

//求职状态
const lookOptions = ref([
  {label: '积极求职中',value: '积极求职中'},
  {label: '正在准备面试',value: '正在准备面试'},
  {label: '已拿到offer',value: '已拿到offer'},
  {label: '已投递简历',value: '已投递简历'},
])

//雇佣类型
const OptionEmployment = ref([
  {label: '全职',value: '全职'},
  {label: '兼职',value: '兼职'},
  {label: '实习',value: '实习'},
])
//用户职业
const levelOptions = ref([
  {label: '在校生',value: '在校生'},
  {label: '应届毕业生',value: '应届毕业生'},
])

//用户学位
const degreeOptions = ref([
  {label: '学士',value: '学士'},
  {label: '硕士',value: '硕士'},
  {label: '博士',value: '博士'},
  {label: '博士后',value: '博士后'},
])

//性别
const genderOptions = ref([
  {label: '男',value: '男'},
  {label: '女',value: '女'},
])

const saveSeekerForm = ref([{
  id:0,
  userId:0,
  identity: '',
  resumeName:'',
  realName:'',
  phone:'',
  birthday:'',
  gender:'',
  personalAdvantage:'',
  email:'',
  wechatId:'',
  graduateTime: '',
  birthdayPlace:'',
  school1:'',
  school2:'',
  lookforStatus:'',
  expectedJob: '',
  expectedCity:'',
  expectedSalaryMin:0,
  expectedSalaryMax:0,
  employmentType:'',
  educationBackground:'',
  major:'',
  degree:'',
  availableStartDate:'',
  intro:'',
  resumeFile:''
}]);

const reName = ref([]);

const deletejl = (now)=>{
  //tips:1=修改 其他：新建
  let id = saveSeekerForm.value[now].id;
  axios.post(BASE_URL+'/v1/user/resum/delete/'+id)
      .then((response)=>{
        if (response.data.code==2000){
          ElMessage.success('删除成功!');
          router.push({ path: 'Resume'});
        }
      })
}
const xiugai = (now)=>{
  console.log("+++now="+now);
  //tips:1=修改 其他：新建
  let id = saveSeekerForm.value[now].id;
  // 使用Vue Router进行页面跳转
  router.push({ path: 'Resume', query: { id:id, num:1} });
}

const changeNow = (name)=>{
  for(let i = 0;i<length;i++){
    if(saveSeekerForm.value[i].resumeName==name){
      now.value = i;
      console.log("now.value===="+now.value);
      break;
    }
  }
}

//页面一加载立即调用
onMounted(() => {
  const query = router.currentRoute.value.query;
  num.value = query.num || 0;
  console.log("操作num："+num.value);
  id.value = query.id || -1;
  uid.value = query.uid || -1;
  saveSeekerForm.value.userId = user.value.userId;
  console.log("userid-------------"+saveSeekerForm.value.userId);
  loadSeeker();//加载员工列表
  console.log("kkkkkkkkkkkkkk");
  console.log(saveSeekerForm);
})

const isImageType = (filename)=> {
  const imageTypes = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp'];
  const extension = filename.toLowerCase().split('.').pop();
  return imageTypes.includes(extension);
}
/**图片上传相关代码开始**/
let fileList = ref([]);
const dialogImageUrl = ref('');
const dialogVisibleImg = ref(false);
//移除图片
const handleRemove = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
  //1.得到要删除的图片路径 uploadFile就是我们上传的图片文件对象
  let imgUrl = uploadFile.response.data;
  //2.给后端发请求,删除图片
  axios.post(BASE_URL+'/v1/file/remove?imgUrl='+imgUrl).then((response)=>{
    if (response.data.code==2000){
      ElMessage.success('删除成功!');
    }
  })

}
//图片上传后预览
const handlePictureCardPreview = (uploadFile) => {
  dialogVisibleImg.value = true;
  console.log(uploadFile);
}
/**图片上传相关代码结束**/
//通过userId查询user表、seeker表里面的信息填入saveSeekerForm内，然后自动显示在input里边
const loadSeeker = () => {
  if(num.value!=0){
    console.log("uid==========================="+uid.value);
    axios.post(BASE_URL+'/v1/user/resumeA/selectById/'+id.value+'/'+uid.value)
        .then((response) => {
          if(response.data.code == 2000){
            saveSeekerForm.value[0] = response.data.data[0];
            console.log("特殊查找："+saveSeekerForm.value.toString());
          }else{
            // ElMessage.error(response.data.msg);
          }
        })
  }else{
    let userId = user.value.userId;
    console.log("userid==========================="+userId);
    axios.post(BASE_URL+'/v1/user/resumeA/selectByUserId/'+userId).then((response) => {
      if (response.data.code === 2000) {
        length = response.data.data.length;
        for(let i = 0;i<response.data.data.length;i++){
          console.log("============"+i)
          reName.value[i] = response.data.data[i].resumeName;
          saveSeekerForm.value[i] = response.data.data[i];
        }
        console.log(saveSeekerForm.value);
        console.log(reName.value);
        if(saveSeekerForm.value[0].resumeName==null){
          ElMessage.warning("还没有简历哦，先去创建简历吧。");
          router.push({ path: 'Resume'});
        }
      } else {
        ElMessage.error(response.data.msg);
      }
    })
  }
}

</script>

<style scoped>
*{
  font-size: 15px;
}
.little-title{
  display: inline-block;
  margin-right: 10px;
  font-size: 17px;
}

.container {
  display: flex;
  width: 88%;
}

.item {
  line-height: 10px;
  margin-right: 40px;
}

.item1 {
  flex: 1; /* 设置为2，表示占据2份空间 */
}

.item2 {
  flex: 1; /* 设置为1，表示占据1份空间 */
}

.item3 {
  flex: 1; /* 设置为1，表示占据1份空间 */
}

.item4 {
  flex: 1; /* 设置为1，表示占据1份空间 */
}
.tips-must-do{
  color: #ec3737;
  font-size: 25px;
}

p{
  color: #494949;
}

.p-title{
  font-size: 20px;
}

.blue{
  height: 18px;
  width: 6px;
  background-color: #57068c;
  margin-right: 7px;
  display: inline-block;
}

.float-right-nav{
  position: fixed;
  right: 11vw;
  background-coor: #ffffff;
  box-shadow: 3px 2px 10px 2px rgba(115, 115, 115, 0.2);
  border-radius: 10px;
}

.main {
  background: linear-gradient(to top, #f3f3f3, #efefff);
  padding-top:30px ;
}

.main-search-body {
  width: 85vw;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 30px;
  padding-top: 1px;
}

.el-upload__tip{
  font-size: 15px;
}
</style>